<template>
  <div class="app-container">
    <el-card class="box-card">
      <!-- 搜索区域 -->
      <div class="filter-container">
        <el-form :inline="true" :model="queryParams" class="demo-form-inline">
          <el-form-item label="订单号">
            <el-input v-model="queryParams.orderNumber" placeholder="请输入订单号" clearable size="small" />
          </el-form-item>
          <el-form-item label="预约人">
            <el-input v-model="queryParams.userName" placeholder="请输入预约人" clearable size="small" />
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="queryParams.status" placeholder="请选择状态" clearable size="small">
              <el-option label="待支付" :value="0" />
              <el-option label="已支付" :value="1" />
              <el-option label="使用中" :value="2" />
              <el-option label="已完成" :value="3" />
              <el-option label="已取消" :value="4" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 表格区域 -->
      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%"
        border
      >
        <el-table-column prop="orderNumber" label="订单号" width="180" />
        <el-table-column prop="roomName" label="房间" width="120" />
        <el-table-column prop="userName" label="预约人" width="120" />
        <el-table-column label="预约时间" width="300">
          <template slot-scope="{row}">
            {{ formatDateTime(row.startTime) }} 至 {{ formatDateTime(row.endTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="amount" label="金额" width="100">
          <template slot-scope="{row}">
            ￥{{ row.amount }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template slot-scope="{row}">
            <el-tag :type="getStatusType(row.status)">
              {{ getStatusText(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" width="180">
          <template slot-scope="{row}">
            {{ formatDateTime(row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template slot-scope="{row}">
            <el-button 
              v-if="row.status === 0"
              type="text" 
              size="small"
              @click="handlePayment(row)"
            >
              确认支付
            </el-button>
            <el-button 
              v-if="row.status === 1"
              type="text" 
              size="small"
              @click="handleStart(row)"
            >
              开始使用
            </el-button>
            <el-button 
              v-if="row.status === 2"
              type="text" 
              size="small"
              @click="handleComplete(row)"
            >
              完成使用
            </el-button>
            <el-button 
              v-if="[0, 1].includes(row.status)"
              type="text" 
              size="small"
              @click="handleCancel(row)"
            >
              取消预约
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryParams.pageNum"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="queryParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import request from '@/utils/request'

export default {
  name: 'BookingManagement',
  data() {
    return {
      loading: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderNumber: undefined,
        userName: undefined,
        status: undefined
      },
      total: 0,
      tableData: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 获取预约列表
    async getList() {
      this.loading = true
      try {
        const res = await request({
          url: '/api/booking/booking-order',
          method: 'get',
          params: this.queryParams
        })
        if (res.code === 200) {
          this.tableData = res.data
          this.total = res.data.length // 如果后端返回总数，这��需要修改
        }
      } catch (error) {
        this.$message.error('获取预约列表失败')
      }
      this.loading = false
    },
    // 状态样式
    getStatusType(status) {
      const types = {
        0: 'warning',  // 待支付
        1: 'success',  // 已支付
        2: 'primary',  // 使用中
        3: 'info',     // 已完成
        4: 'danger'    // 已取消
      }
      return types[status] || 'info'
    },
    // 状态文本
    getStatusText(status) {
      const texts = {
        0: '待支付',
        1: '已支付',
        2: '使用中',
        3: '已完成',
        4: '已取消'
      }
      return texts[status] || '未知'
    },
    // 格式化时间
    formatDateTime(time) {
      if (!time) return ''
      return time.replace('T', ' ').split('.')[0]
    },
    // 搜索
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    // 重置
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        orderNumber: undefined,
        userName: undefined,
        status: undefined
      }
      this.getList()
    },
    // 分页
    handleSizeChange(val) {
      this.queryParams.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val
      this.getList()
    },
    // 确认支付
    handlePayment(row) {
      this.$confirm('确认该订单已支付吗？', '提示', {
        type: 'warning'
      }).then(async () => {
        try {
          await request({
            url: `/api/booking/booking-order/${row.id}/pay`,
            method: 'put'
          })
          this.$message.success('操作成功')
          this.getList()
        } catch (error) {
          this.$message.error('操作失败')
        }
      }).catch(() => {})
    },
    // 开始使用
    handleStart(row) {
      this.$confirm('确认开始使用该自习室吗？', '提示', {
        type: 'warning'
      }).then(async () => {
        try {
          await request({
            url: `/api/booking/booking-order/${row.id}/start`,
            method: 'put'
          })
          this.$message.success('操作成功')
          this.getList()
        } catch (error) {
          this.$message.error('操作失败')
        }
      }).catch(() => {})
    },
    // 完成使用
    handleComplete(row) {
      this.$confirm('确认完成使用吗？', '提示', {
        type: 'warning'
      }).then(async () => {
        try {
          await request({
            url: `/api/booking/booking-order/${row.id}/complete`,
            method: 'put'
          })
          this.$message.success('操作成功')
          this.getList()
        } catch (error) {
          this.$message.error('操作失败')
        }
      }).catch(() => {})
    },
    // 取消预约
    handleCancel(row) {
      this.$confirm('确认取消该预约吗？', '提示', {
        type: 'warning'
      }).then(async () => {
        try {
          await request({
            url: `/api/booking/booking-order/${row.id}/cancel`,
            method: 'put'
          })
          this.$message.success('取消成功')
          this.getList()
        } catch (error) {
          this.$message.error('取消失败')
        }
      }).catch(() => {})
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}
.filter-container {
  padding-bottom: 10px;
}
.pagination-container {
  padding: 20px 0;
  text-align: right;
}
</style> 